<template>
	<view>
		<view class="p-navbox">
			<view :class="tab==1?'p-nav p-checked':'p-nav'" @click="alterTab('废纸',1)">废纸</view>
			<view :class="tab==2?'p-nav p-checked':'p-nav'" @click="alterTab('塑料',2)">塑料</view>
			<view :class="tab==3?'p-nav p-checked':'p-nav'" @click="alterTab('废金属',3)">废金属</view>
			<view :class="tab==4?'p-nav p-checked':'p-nav'" @click="alterTab('服饰',4)">服饰</view>
			<view :class="tab==5?'p-nav p-checked':'p-nav'" @click="alterTab('家电',5)">家电</view>
		</view>
		<view class="p-box">
			<text>今日指导价 {{zhidaojia}}元</text>
		</view>
		<view class="bkk">
			<view class="bl b20">
				<view class="bc">
					<view class="bc">
						<i class="ri-money-cny-circle-fill" style="color:#008040;font-size:30px;"></i>
						<!-- <i-icon size="30px" color="#008040" name="money-cny-circle-fill"></i-icon> -->
						回收价格表
					</view>
				</view>
				<view class="bc">
					<i class="ri-map-pin-2-fill" style="color:#008040;font-size:16px;"></i>
					<!-- <i-icon size="16px" color="#008040" name="map-pin-2-fill"></i-icon> -->
					<text v-html="stationName||`<font color=#999999>[服务站]</font>`"></text>
				</view>
			</view>
			<view class="p-price-list">
				<view class="" v-for="(item,index) in serviceList">
					<view class="bl h50">
						<view>{{item.recyclesTwoName}}</view>
						<view class="red">{{item.recyclesPrice}}元/{{item.recyclesUnit}}</view>
					</view>
				</view>
				<view v-if="!serviceList || serviceList.length==0" class="bl b10">
					<text style="text-align:center;width:100%;color:#7e7e7e;">无</text>
				</view>
			</view>
		</view>
		<view class="bkk">
			<view class="bl b20">
				<view class="bc">
					<view class="bc">
						<i class="ri-file-search-fill" style="color:#008040;font-size:30px;"></i>
						<!-- <i-icon size="30px" color="#008040" name="file-search-fill"></i-icon> -->
						废旧二维码
					</view>
				</view>
			</view>
			<view class="bl">
				<view class="p-erweima r10">
					<!-- 二维码 -->
					<view class="uqrcode">
						<canvas id="qrcode" canvas-id="qrcode"
							:style="{'width':`${options.size}px`,'height':`${options.size}px`}"/>
					</view>
				</view>
				<view class="p-erweima-info" style="font-size: 14px;">
					<view class="h2 b10">使用说明</view>
					<view class="b5">1.该二维码用于识别业主信息</view>
					<view class="">2.业主出售废旧品时出示给服务站管理员</view>
				</view>
			</view>
		</view>
		<view class="bkk">
			<view class="bl b20">
				<view class="bc">
					<view class="bc">
						<i class="ri-numbers-fill" style="color:#008040;font-size:30px;"></i>
						<!-- <i-icon size="30px" color="#008040" name="numbers-fill"></i-icon> -->
						废旧品回收流程
					</view>
				</view>
			</view>
			<view class="p-flow">
				<view class="p-flow-step">
					<span class="p-flow-step-no">1</span>
					<text>业主出示出售废旧二维码</text>
				</view>
				<view class="p-flow-step">
					<span class="p-flow-step-no">2</span>
					<text>社区管理员扫描该二维码</text>
				</view>
				<view class="p-flow-step">
					<span class="p-flow-step-no">3</span>
					<text>废旧称重及报价</text>
				</view>
				<view class="p-flow-step">
					<span class="p-flow-step-no">4</span>
					<text>确认价格并支付</text>
				</view>
				<view class="p-flow-step">
					<span class="p-flow-step-no">5</span>
					<text>服务评价</text>
				</view>
				<view class="p-flow-step">
					<span class="p-flow-step-no">6</span>
					<text>获取爱心能量</text>
				</view>
			</view>
		</view>
		<view class="bkk">
			<view class="bl b20">
				<view class="bc">
					<view class="bc">
						<i class="ri-file-text-line" style="color:#008040;font-size:30px;"></i>
						<!-- <i-icon size="30px" color="#008040" name="file-text-line"></i-icon> -->
						爱心能量说明
					</view>
				</view>
			</view>
			<view class="b5">1.爱心能量可以通过出售废旧获得</view>
			<view class="b5">2.一个爱心能量=1分钱</view>
			<view class="">3.按3%计算爱心能力返还给业主，例如：卖出100元废纸皮，业主获得300个爱心能量；</view>
		</view>
	</view>
</template>

<script>
	import uqrcode from '@/components/uqrcode.js'
	export default {
		onReady() {
			let params = {
				"uid": (uni.getStorageSync("uid") || ""),
				"sid": (uni.getStorageSync("stationId") || ""),
				"t": new Date().getTime().toString()
			}
			this.make({
				'text': JSON.stringify(params)
			});
		},
		data() {
			return {
				serviceList: [],
				zhidaojia: 0.00,
				stationName: '',
				tab: 1,
				options: {
					canvasId: 'qrcode',
					size: 180,
					margin: 10,
					text: '',
					backgroundColor: '#ffffff',
					foregroundColor: '#303030'
				},
				cache: {}
			}
		},
		methods: {
			//二维码生成
			make(options) {
				return uqrcode.make(Object.assign(this.options, options), this)
			},
			/**
			 * 获取废旧回收服务列表
			 * @param {Object} villageName 站点名称
			 * @param {Object} serveType 服务类型
			 */
			getServiceList: function(villageName, serveType) {
				let _this = this;
				this.httpRequest({
					url: '/guiminSite/list/by/station?villageName=' + villageName + '&serveType=' + serveType,
					method: 'GET',
					fn(data) {
						_this.serviceList = data;
						_this.cache[serveType] = data || [];
						if (data && data.length > 0) {
							let price = 0;
							for (let i in data) {
								price = price + parseFloat(data[i].recyclesPrice || 0)
							}
							_this.zhidaojia = (price / data.length).toFixed(2)
						} else {
							_this.zhidaojia = 0;
						}
					}
				});
			},
			// 切换分类
			alterTab: function(serveType, tab) {
				this.tab = tab
				if (this.cache[serveType]) {
					this.serviceList = this.cache[serveType]
					let data = this.cache[serveType]
					if (data && data.length > 0) {
						let price = 0;
						for (let i in data) {
							price = price + parseFloat(data[i].recyclesPrice || 0)
						}
						this.zhidaojia = (price / data.length).toFixed(2)
					} else {
						this.zhidaojia = 0;
					}
				} else {
					this.getServiceList(this.stationName, serveType)
				}
			}
		},
		onLoad(p) {
			if (p.stationName) {
				this.stationName = p.stationName;
				this.getServiceList(this.stationName, '废纸')
			} else if (uni.getStorageSync('stationName')) {
				this.stationName = uni.getStorageSync('stationName');
				this.getServiceList(this.stationName, '废纸')
			} else {
				uni.showToast({
					title: '页面数据有误',
					icon: 'error'
				})
			}
		}
	}
</script>

<style>
	.p-navbox {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-top: 20px;
	}

	.p-nav {
		height: 40px;
	}

	.p-checked {
		color: #008040;
		border-bottom: 5px solid #008040;
	}

	.p-erweima {
		display: flex;
	}

	.p-erweima image {
		display: inline-block;
		width: 180px;
		height: 180px;
	}

	.p-flow-step {
		display: block;
		line-height: 30px;
		margin-left: 10px;
		padding-left: 10px;
		border-left: 2px solid #008040;
	}

	.p-flow-step-no {
		display: inline-block;
		font-size: 12px;
		height: 22px;
		width: 22px;
		line-height: 22px;
		background-color: #008040;
		border-radius: 50%;
		text-align: center;
		margin-left: -22px;
		margin-right: 20px;
		color: #FFFFFF;
	}
</style>
